<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--此页面用于测试 非最终渲染页面-->
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="viewport" content="width:device-width,initial-scale=1">
    <title>宗门登录</title>
    <link rel="stylesheet"  href="css/layui.css"  media="all">
</head>
<style type="text/css">
    .top {
        /* 设置宽度高度背景颜色 */
        height: auto; /*高度改为自动高度*/
        width: 100%;
        margin-left: 0;
        background: darkturquoise;
        position: fixed; /*固定在顶部*/
        top: 0; /*距离底部的距离为0*/
        margin-bottom: 5px;
    }
    .bottom {
        /* 设置宽度高度背景颜色 */
        height: auto; /*高度改为自动高度*/
        width: 100%;
        margin-left: 0;
        background: rgb(189, 181, 181);
        position: fixed; /*固定在顶部*/
        bottom: 0; /*距离底部的距离为0*/
        margin-bottom: 5px;
    }

    .bottom ul {
        /* 清除ul标签的默认样式 */
        width: auto; /*宽度也改为自动*/
        height: 70px; /*高度改为自动高度*/
        list-style-type: none;
        white-space: nowrap;
        overflow: hidden;
        margin-left: 10%;
        /* margin-top: 0;          */
        padding: 0;

    }

    .bottom li {
        float: left; /* 使li内容横向浮动，即横向排列  */
        margin-right: 5%; /* 两个li之间的距离*/
        width: auto;
        position: relative;
        overflow: hidden;
    }

    .bottom li a {
        /* 设置链接内容显示的格式*/
        display: block; /* 把链接显示为块元素可使整个链接区域可点击 */
        color: white;
        text-align: center;
        padding: 3px;
        overflow: hidden;
        text-decoration: none; /* 去除下划线 */

    }

    .bottom li a:hover {
        /* 鼠标选中时背景变为黑色 */
        background-color: #111;
    }

    .bottom ul li ul {
        /* 设置二级菜单 */
        margin-left: -0.2px;
        background: rgb(189, 181, 181);
        position: relative;
        display: none; /* 默认隐藏二级菜单的内容 */

    }

    .bottom ul li ul li {
        /* 二级菜单li内容的显示 */

        float: none;
        text-align: center;
    }

    .bottom ul li:hover ul {
        /* 鼠标选中二级菜单内容时 */
        display: block;
    }

    body {
      /*background-image: url("image/1.png");*/
        background-color: azure;
    }

    .center{
        display: block;
    }
</style>
<body>
<center>
<div class="top">
   <h2 style="color: crimson">剑宗</h2>
</div>
<div class="">
    <span id="content"></span><br/>
<button id="btn">点击出现验证码</button>
</div>
<div class="bottom">
    <button type="button" class="layui-btn layui-btn-normal" onclick="admin()"><h3>进入后台</h3></button>
    <button type="button" class="layui-btn layui-btn-normal" onclick="login()"><h3>进入宗门</h3></button>
</div>
</center>

</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/layui.js" charset="utf-8"></script>
<script src="js/public.js"></script>
<script src="js/crypto-js.js"></script>
<script src="js/ase.js"></script>
<script src="js/login.js"></script>
<script src="js/verify.js"></script>
<script type="text/javascript">
    $('#content').slideVerify({
        baseUrl:base_url,  //服务器请求地址, 默认地址为安吉服务器;
        containerId:'btn',//pop模式 必填 被点击之后出现行为验证码的元素id
        mode:'pop',     //展示模式
        imgSize : {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
            width: '400px',
            height: '200px',
        },
        barSize:{          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
            width: '400px',
            height: '40px',
        },
        beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效
            let flag = true;
            //实现: 参数合法性的判断逻辑, 返回一个boolean值
            return flag
        },
        ready : function() {},  //加载完毕的回调
        success : function(params) { //成功的回调
            // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
            例如: login($.extend({}, params))
        },
        error : function() {}        //失败的回调
    });
</script>
</html>